<template>
  <view class="trasac-content">
    <div class="tabs">
      <uni-segmented-control :current="current" :values="tabList" @clickItem="tabsChange" styleType="button"
        activeColor="#4cd964"></uni-segmented-control>
    </div>
    <view class="weui-search-bar">
      <view class="weui-search-bar__form">
        <view class="weui-search-bar__box">
          <picker :value="index" mode="selector" @change="statusChange" :range="rangeList" range-key="label">
            <view class="uni-input" style="padding-left: 10px;">{{ statusName }}</view>
          </picker>
        </view>
      </view>
      <view class="weui-search-bar__cancel-btn" @click="resetForm">重置</view>
    </view>
    <view v-if="current===2" class="content-box">
      <view class="records-box-wrap" v-for="item in recordsList" :key="item.id">
        <view>
          <view v-if="isBlueIcon" class="icon-text" :class="{
            'outer-bg-blue': [2, 3, 6, 7].includes(item.tradeType),
            'outer-bg-yellow': [1, 4, 5].includes(item.tradeType)
          }">
            <view :class="{
              'inner-bg-blue': [2, 3, 6, 7].includes(item.tradeType),
              'inner-bg-yellow': [1, 4, 5].includes(item.tradeType)
            }">
              {{ typeMap[item.tradeType] }}
            </view>
          </view>
          <view v-else class="icon-text" :class="{
            'outer-bg-red': [2, 3, 6, 7].includes(item.tradeType),
            'outer-bg-yellow': [1, 4, 5].includes(item.tradeType)
          }">
            <view :class="{
              'inner-bg-red': [2, 3, 6, 7].includes(item.tradeType),
              'inner-bg-yellow': [1, 4, 5].includes(item.tradeType)
            }">
              {{ typeMap[item.tradeType] }}
            </view>
          </view>
          <view>
            <view class="name">{{ tradeTypeText(item.tradeType) }}</view>
            <text class="time">{{ item.createTime | formatData }}</text>
          </view>
        </view>
        <view>
          <view class="amount-text">{{ payAmountText(item) }}</view>
          <text class="balance">余额：{{ balanceText(item.postTradeBalance) }}</text>
        </view>
      </view>
      <uni-load-more :status="isMore" />
    </view>
    <view v-else class="content-box">
      <view class="records-box-wrap" v-for="item in recordsList" :key="item.id">
        <view>
          <view>
            <view class="name">
              {{tradeTypeText(item.tradeType)}}
              <text class="tag-label"
                :class="{'green-type':item.tradeStatus===1,'red-type':item.tradeStatus===2,'orange-type':item.tradeStatus===3,'gray-type':item.tradeStatus===4,'blue-type':item.tradeStatus===5}">{{tradeStatusText(item.tradeStatus)}}</text>
            </view>
            <text class="time">{{ item.createTime | formatData }}</text>
          </view>
        </view>
        <view>
          <view class="amount-text">{{payAmountText(item)}}</view>
          <text class="balance">余额：{{balanceText(item.postTradeBalance)}}</text>
        </view>
      </view>
      <uni-load-more :status="isMore" />
    </view>
  </view>
</template>

<script>
  import { timestampToChineseTime } from '@/utils/common.js';
  import { getTransaction, getRechargeTransaction, getRefundTransaction, getDictDatas } from '@/api/me.js';
  export default {
    data() {
      return {
        isMore: 'more',
        recordsList: [],
        index: 0,
        current: 1,
        status: null,
        rangeList: [],
        tradeTypeList: [],
        tradeStatusList: [],
        statusName: '请选择退款状态',
        typeMap: {
          1: '排',
          2: '退',
          3: '充',
          4: '叫',
          5: '接',
          6: '退',
          7: '退'
        },
        queryParam: {
          pageNo: 1,
          pageSize: 10
        },
        tabList: ['充值记录', '退款记录', '全部交易记录']
      };
    },
    computed: {
      tradeTypeText() {
        return (type) => {
          return this.tradeTypeList.find((e) => e.value === type?.toString())
            ?.label;
        };
      },
      tradeStatusText() {
        return (type) => {
          return this.tradeStatusList.find((e) => e.value === type?.toString())
            ?.label;
        };
      },
      payAmountText() {
        return (data) => {
          if ([2, 3, 6].includes(data?.tradeType)) {
            return `+${((data.payAmount || 0) / 100).toFixed(2)}`;
          }
          return `-${((data.payAmount || 0) / 100).toFixed(2)}`;
        };
      },
      balanceText() {
        return (balance) => {
          return ((balance || 0) / 100).toFixed(2);
        };
      },
      isBlueIcon() {
        return this.$store.state.user.curTypeColor === '#409EFE'
      }
    },
    filters: {
      formatData(date) {
        return timestampToChineseTime(date);
      }
    },
    async mounted() {
      this.current = 1;
      this.recordsList = [];
      await this.getDictDatas();
      this.getList();
    },
    onPullDownRefresh() {
      this.queryParam.pageNo = 1;
      this.isMore = 'more';
      this.recordsList = [];
      this.getList();
    },
    onReachBottom() {
      if (this.isMore == 'more') {
        this.queryParam.pageNo++;
        this.getList();
      }
    },
    methods: {
      tabsChange(e) {
        this.index = 0;
        this.status = null;
        this.current = e.currentIndex
        if (this.current === 0) {
          this.statusName = '请选择充值状态'
          this.rangeList = JSON.parse(JSON.stringify(this.tradeStatusList))
        }
        if (this.current === 1) {
          this.statusName = '请选择退款状态'
          this.rangeList = JSON.parse(JSON.stringify(this.tradeStatusList))
        }
        if (this.current === 2) {
          this.statusName = '请选择交易类型'
          this.rangeList = JSON.parse(JSON.stringify(this.tradeTypeList))
        }
        this.initData()
      },
      statusChange(e) {
        this.index = e.detail.value
        if ([0, 1].includes(this.current)) {
          this.status = this.tradeStatusList[this.index]?.value;
          this.statusName = this.tradeStatusList[this.index]?.label;
        } else {
          this.status = this.tradeTypeList[this.index]?.value;
          this.statusName = this.tradeTypeList[this.index]?.label;
        }
        this.initData()
      },
      resetForm() {
        this.index = 0;
        this.status = null;
        if (this.current === 0) {
          this.statusName = '请选择充值状态'
        }
        if (this.current === 1) {
          this.statusName = '请选择退款状态'
        }
        if (this.current === 2) {
          this.statusName = '请选择交易类型'
        }
        this.initData()
      },
      initData() {
        this.queryParam.pageNo = 1;
        this.isMore = 'more';
        this.recordsList = [];
        this.getList();
      },
      async getDictDatas() {
        const res = await getDictDatas();
        if (res.code === 0) {
          const result = res?.data || []
          this.tradeStatusList = result.filter(
            (e) => e.dictType === 'trade_status'
          );
          this.tradeTypeList = result.filter(
            (e) => e.dictType === 'biz_trade_type'
          );
          this.rangeList = JSON.parse(JSON.stringify(this.tradeStatusList))
        }
      },
      async getList() {
        try {
          const data = this.queryParam;
          let res = null;
          delete data.tradeType
          delete data.tradeStatus
          if (this.current === 0) {
            data['tradeStatus'] = this.status || ''
            res = await getRechargeTransaction(data);
          }
          if (this.current === 1) {
            data['tradeStatus'] = this.status || ''
            res = await getRefundTransaction(data);
          }
          if (this.current === 2) {
            data['tradeType'] = this.status || ''
            res = await getTransaction(data);
          }
          if (res.code == 0) {
            const result = res.data.pageResult.list || [];
            this.recordsList = [...this.recordsList, ...result];
            if (res.data.pageResult.total == this.recordsList.length) {
              this.isMore = 'noMore';
            } else {
              this.isMore = 'more';
            }
          }
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        } catch (e) {
          return false;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tabs {
    padding: 0 17.78rpx;
    background-color: #ffffff;
  }

  .outer-bg-red {
    background-color: #ffa59c;
  }

  .inner-bg-red {
    background-color: #d32d2d;
  }

  .outer-bg-blue {
    background-color: #c5e2ff;
  }

  .inner-bg-blue {
    background-color: #49a4ff;
  }

  .outer-bg-yellow {
    background-color: #ffe8aa;
  }

  .inner-bg-yellow {
    background-color: #ffd155;
  }

  .tag-label {
    margin-left: 10px;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    border: none !important;
  }

  .content-box {
    margin: 17.78rpx;

    .icon-text {
      width: 78.22rpx;
      height: 78.22rpx;
      padding: 8rpx;
      color: #ffffff;
      border: 3.56rpx solid;
      border-radius: 60.44rpx;
      margin-right: 17.78rpx;

      >view {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 32rpx;
        border-radius: 50%;
      }
    }

    .records-box-wrap {
      display: flex;
      padding: 26.67rpx 26.67rpx 18rpx 26.67rpx;
      justify-content: space-between;
      background-color: #ffffff;

      >view:first-child {
        display: flex;
      }

      >view {
        line-height: 24px;
      }

      .name {
        font-size: 35.56rpx;
        font-weight: 600;
      }

      .time {
        display: inline-block;
        color: #999999;
      }

      .balance {
        color: #999999;
      }

      .amount-text {
        text-align: end;
        font-size: 35.56rpx;
        font-weight: 600;
      }
    }

    .records-box-wrap+.records-box-wrap {
      margin-top: 17.78rpx;
    }
  }
</style>